.shade-bar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shade-bar-shade {
  width: 100%;
  height: 100%;
}

.shade-bar-shade-01 {
  background-color: hsl(var(--theme-primary-010));
  color: hsl(var(--theme-primary-text-010));
}

.shade-bar-shade-02 {
  background-color: hsl(var(--theme-primary-020));
  color: hsl(var(--theme-primary-text-020));
}

.shade-bar-shade-03 {
  background-color: hsl(var(--theme-primary-030));
  color: hsl(var(--theme-primary-text-030));
}

.shade-bar-shade-04 {
  background-color: hsl(var(--theme-primary-040));
  color: hsl(var(--theme-primary-text-040));
}

.shade-bar-shade-05 {
  background-color: hsl(var(--theme-primary-050));
  color: hsl(var(--theme-primary-text-050));
}

.shade-bar-shade-06 {
  background-color: hsl(var(--theme-primary-060));
  color: hsl(var(--theme-primary-text-060));
}

.shade-bar-shade-07 {
  background-color: hsl(var(--theme-primary-070));
  color: hsl(var(--theme-primary-text-070));
}

.shade-bar-shade-08 {
  background-color: hsl(var(--theme-primary-080));
  color: hsl(var(--theme-primary-text-080));
}

.shade-bar-shade-09 {
  background-color: hsl(var(--theme-primary-090));
  color: hsl(var(--theme-primary-text-090));
}

.shade-bar-shade-10 {
  background-color: hsl(var(--theme-primary-100));
  color: hsl(var(--theme-primary-text-100));
}

.shade-bar-shade-11 {
  background-color: hsl(var(--theme-primary-110));
  color: hsl(var(--theme-primary-text-110));
}

.shade-bar-shade-12 {
  background-color: hsl(var(--theme-primary-120));
  color: hsl(var(--theme-primary-text-120));
}

.shade-bar-shade-13 {
  background-color: hsl(var(--theme-primary-130));
  color: hsl(var(--theme-primary-text-130));
}

.shade-bar-shade-14 {
  background-color: hsl(var(--theme-primary-140));
  color: hsl(var(--theme-primary-text-140));
}